<template>
    <div>
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
            <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 账号管理</h2>
        </div>

        <div class="wrapper-md">
            <div class="panel panel-default form-horizontal form">
                <div class="table-list">
                    <div class="panel-heading" style="background-color: #f6f8f8 !important;">
                        映像(Image) 是带有操作系统的主机模板.用户可以基于已有映像创建主机,也可以将自有主机捕获为新映像,以备后用<br/>
                        系统映像为官方提供的模板.会提供主流的Linux | Windows模板,并根据上游厂商更新版本<br/>
                        有映像创建主机,也可以将自有主机捕获,供的模板.会提供主流的Linux | Windows模板
                    </div>
                    <div class="panel-body">

                        <ui-operate-bar :elements="operateOptions"></ui-operate-bar>

                        <div class="table-responsive table-scrollable no-padding-bottom">
                            <demo-grid
                                    :row-events="itemActions"
                                    :columns="gridColumns" :data-url="url" :field-events="fieldEvents"
                                    :filter-key="searchQuery" :settings="settings" v-ref:table>
                            </demo-grid>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<style lang="sass">
    .linka{
        color: goldenrod;
    }
    .linka:hover{
        text-decoration: underline;
    }
</style>
<script>


    import VueStrap from 'vue-strap'

    import demoGrid from '../../resources/components/demoGrid.vue'
    import uiOperateBar from '../../resources/components/uiOperateBar.vue'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                searchQuery: '',
                gridColumns:[
                    {name:"姓名",width:"19%",field:"name",class:"linka",clickEvent: function (row) {
                        console.log(row.name,row.age);
                    }},
                    {name:"能量",width:"19%",field:"power"},
                    {name:"年龄",width:"19%",field:"age"},
                    {name:"邮箱",width:"19%",field:"email"}
                ],
                fieldEvents: {
                    "ageFormat":function(value,row){
                        return value + 'abc';
                    },
                    "ageColor":function(value,row){
                        var color = "green";
                        return color;
                    }
                },
                url:"../datas/grid.json",
                settings:{
                    autoLoad: true,
                    pageSize: 7,
                    showCheckBox: true
                },
//                gridData: [
//                    { name: 'Chuck Norris', power: Infinity },
//                    { name: 'Bruce Lee', power: 9000 },
//                    { name: 'Jackie Chan', power: 7000 },
//                    { name: 'Jet Li', power: 8000 }
//                ]
                itemActions: {
                    show: true,
                    width: "20%",
                    events: [
                        {
                            name: '修改权限',
                            icon: 'pencil',
                            class: 'btn-default',
                            click:function(row){
                              console.log(row.name,row.power);
                            }
                        },
                        {
                            name: '删除',
                            icon: 'pencil',
                            class: 'btn-default',
                            click:function(row){
                                console.log(row.age,row.email);
                            }
                        }
                    ]
                },
                searchForm:{
                    queryParams:{
                        username:null
                    }
                },
                select:{
                    options: [
                        {value: 1, label: 'Cat'},
                        {value: 2, label: 'Cow'},
                        {value: 3, label: 'Dog'},
                        {value: 4, label: 'Elephant'},
                        {value: 5, label: 'Fish'},
                        {value: 6, label: 'Lion'},
                        {value: 7, label: 'Tiger'},
                        {value: 8, label: 'Turtle'}
                    ],
                    justified: true,
                    search: true,
                    required:true,
                    clearButton:true,
                    closeOnSelect:true,
                    disabled:false,
                    normal:null,
                    placeholder:'请选择...',
                    searchText:'关键字'
                },
                ajax: {
                    value:null
                },
                date: {
                    disabled: [],
                    value: '2016-06-06',
                    formats: [
                        {value: 'dd/MM/yyyy', label: 'dd/MM/yyyy'},
                        {value: 'dd-MM-yyyy', label: 'dd-MM-yyyy'}
                    ],
                    format: ['yyyy-MM-dd'],
                    clear: false,
                    placeholder: 'placeholder is displayed when value is null or empty'
                },
                operateOptions:[
                    {name: "刷新", type:"button", class:"btn-dark", icon:"refresh", events: {
                        clicker: function(data, element) {
                            alert("刷新");
                        }
                    }},
                    {name: "新建项目", type:"button", class:"btn-dark", icon:"plus", events: {
                        clicker: function(data, element) {
                            alert("新建项目");
                            //openModal();
                        }
                    }},
                    {name: "城市", type:"dropdown", class:"btn-dark", icon:"plus", value: "", nameField:"name", valueField:"value", items: [
                        {name: "上海", value: "SH", icon: ""},
                        {name: "江苏", value: "JS", icon: ""},
                        {name: "湖北", value: "HB", icon: ""}
                    ], events: {
                        chooser: function(name, value, item, element) {
                            console.log(name);
                        }
                    }},
                    {name: "更多操作", type:"buttons", class:"btn-dark", icon: "th-large", items: [
                        {name: "添加", icon: "plus", disabled:true, events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-添加");
                            }
                        }},
                        {name: "删除", icon: "remove", events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-删除");
                            }
                        }},
                        {name: "编辑", icon: "pencil", disabled:true, events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-编辑");
                            }
                        }}
                    ]},
                    {name: "项目名称", type:"search", placeholder: "项目名称", value: "", events: {
                        submitter: function(data, element) {
                            alert("submitter");
                        }
                    }}
                ]
            }
        },
        watch: {
            disabled () {
                this.$refs.dp.getDateRange()
            },
            format (newV) {
                this.value = this.$refs.dp.stringify()
            }
        },
        ready () {

        },
        methods: {
            getRowData () {
                var rowData = this.$refs.table.getData()[0];
                console.log(rowData.name,rowData.power,rowData.age,rowData.email);
            },
            getQueryParams () {
                console.log(this.select.normal);
            }
        },
        events: {

        },
        components: {
            demoGrid,
            uiOperateBar,
            vSelect:VueStrap.select,
            vOption:VueStrap.option,
            datepicker:VueStrap.datepicker
        }
    }

</script>
